
<script type="text/javascript" src="../../libs/js/fbfriendselector/jquery.facebook.multifriend.select.js"></script> 
<script type="text/javascript">
    
    function FBFriendSelectorInit() {
      FB.api('/me', function(response) {
          jQuery("#jfmfs-container").jfmfs({ 
                                  max_selected: 10, 
                                  max_selected_message: "valgt (in {0} of {1} selected)",
                                  friend_fields: "id,name,last_name",
                                  pre_selected_friends: [],
                                  exclude_friends: [],
                                  sorter: function(a, b) {
                                    var x = a.last_name.toLowerCase();
                                    var y = b.last_name.toLowerCase();
                                    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                                  }
                      });
                      
          jQuery("#jfmfs-container").bind("jfmfs.friendload.finished", function() { 
              window.console && console.log("finished loading!"); 
          });
          
          jQuery("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) { 
              window.console && console.log("changed", data);
              var str = "";
              var uids = "";
              var sign = "";
              var m = data.length;
              
              for(d=0; d<m; d++) {
                  str += sign + data[d].name;
                  uids += sign + data[d].id;
                  sign = ", ";
              }
              jQuery("#data_names").val(str);
              jQuery("#data_uids").val(uids);
          });                     
      });
    }
    
</script>
<style type="text/css">
    #jfmfs-friend-selector{
        width: 478px;
        background-color: white;
        height: 174px;
    }
    #jfmfs-friend-selector input {
        height: 19px;
        margin: 0 0;
        width: 117px;
    }
    #jfmfs-friend-container {
        height: 144px;
    }
    .filter-link{
        color:black;
    }
    .invite-form{
        margin: 0 auto;
        width: 487px;
    }
    #jfmfs-container{
        border-color: #f0f0f0;
        border-style: solid;
        border-width: 1px;
        padding: 3px;
    }
    .invited-table td{
        padding: 5px;
    }
</style>

<?php if($view->invited) { ?>
    
    <h3>Congratulations, you invited your friends successfully.</h3>
    
    <table class="invited-table" border="0" cellpadding="0" cellspacing="0">
        <?php foreach($view->names as $k => $name) { ?>
        <tr>
            <td>
                <a href="http://www.facebook.com/profile.php?id=<?php echo $view->uids[$k];?>">
                    <img src="http://graph.facebook.com/<?php echo $view->uids[$k];?>/picture" />
                </a>
            </td>
            <td>
                <?php echo $name;?>
            </td>
        </tr>
        <?php } ?>
    </table>

<?php } else { ?>

<form method="post" class="invite-form">
    <?php if($view->error) { ?>
    <h4 style="color: red;"><?php echo $view->error;?></h4>
    <?php } ?>
    <?php if($view->isConnectedFacebook) { ?>
    <h4>Select your friends:</h4>
    <div id="jfmfs-container">LOADING...</div>
    <h4>Your message:</h4>
    <textarea id="user_text" style="width: 480px;" name="data[user_text]" cols="30" rows="5"></textarea>
        
    <input type="hidden" id="data_names" name="data[names]" value="" />
    <input type="hidden" id="data_uids" name="data[uids]" value="" />
    <br/><br/>
    <input type="submit" value="INVITE" />
    <?php } else { ?>
    <h2 style="text-align: center;">
        Please <a href="javascript:webjs.loginFacebook();"> CONNECT TO FACEBOOK</a> to get your friend list!!!
    </h2>
    <?php } ?>    
</form>

<script type="text/javascript">   
    window.setTimeout("FBFriendSelectorInit()", 1500);
</script>
<?php } ?>